<template>
  <a-modal
    v-model:visible="visible"
    title="选择项目"
    width="80%"
    height="600px"
    :body-style="{ padding: '16px 16px 0 16px' }"
    @ok="handleOk"
  >
    <SearchForm
      v-model:columns="columns"
      :show-add-btn="false"
      :keyword-search-data="searchModel"
      :select-data="selectData"
      class="!mb-0"
      @search="handleSearch"
    />
    <div class="h-120">
      <SlTable
        :columns="columns"
        row-key="projectId"
        :data-source="tableData"
        :row-selection="rowSelection"
        :loading="tableLoading"
        :pagination="pagination"
        :scroll="{ x: 'auto' }"
        :search-model="applySearchModel"
        :custom-row="customRow"
      >
      </SlTable>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import CURD from "/@/api/curd";
import SearchForm from "/@/components/SearchForm.vue";
import SlTable from "/@/components/SlTable.vue";
import { ShowCURDModalOptions, CURDAction, CURDDialogExpose } from "/@/components/CURDDialog/models";
import { useI18n } from "/@/locales/useI18n";
import { onMounted, ref, shallowRef, watch } from "vue";
import TablePage from "/@/components/TablePage.vue";
import { Api } from "/@/api/aiot/projectManage";
import { message } from "ant-design-vue";
import { CustomerGrpItem, CustomerItem } from "/@/api/aiot/customerManage/models";
import { useCURD } from "/@/hooks/useCURD";
import { useProjectManage } from "/@/views/aiot/enterprise/ProjectManage/useProjectManage";
import { getAllIndustrys } from "/@/api/aiot/industry";
import { SelectItem } from "/@/types/components";
import { OrderRule } from "/@/api/models";
import { ProjectItem } from "/@/api/aiot/projectManage/models";

const props = defineProps<{
  show: boolean;
}>();
const emits = defineEmits(["update:show", "ok"]);
const { t } = useI18n();
const visible = ref<boolean>(false);
const requiredKeys = ["name", "account", "oper"];
const {
  tableData,
  tableLoading,
  curd,
  reloadTable,
  pagination,
  searchModel: applySearchModel,
} = useCURD<ProjectItem>({
  createUrl: Api.addProject,
  deleteUrl: Api.deleteProjectsByIds,
  getPageUrl: Api.projectsPage,
  updateUrl: Api.updateProject,
  loadOnMounted: false,
});
const createVisible = ref<boolean>(false);
function showCreateModal() {
  createVisible.value = true;
}
const columns = [
  {
    title: t("aiot.projectManage.projectName"),
    dataIndex: "projectName",
    ellipsis: true,
  },
  {
    title: t("aiot.projectManage.customerName"),
    dataIndex: "customerName",
    ellipsis: true,
  },
  {
    title: t("aiot.projectManage.contactPerson"),
    dataIndex: "contactPerson",
    ellipsis: true,
  },
  {
    title: t("aiot.projectManage.contactPhone"),
    dataIndex: "contactPhone",
    ellipsis: true,
  },
  {
    title: t("aiot.projectManage.industryName"),
    dataIndex: "industryName",
    ellipsis: true,
  },
];
const { model, modelFormSetting } = useProjectManage();
const grpIns = ref<CURDDialogExpose>();
const searchModel = [{ key: "searchText", label: "项目名称" }];
function handleSearch(model) {
  reloadTable({ model, current: 1, sort: "displayOrder", order: OrderRule.ASC });
}
const selectedRowKeys = ref<string[]>([]);
const curSelectedGrp = shallowRef<CustomerGrpItem>();
function setGrpShowOptions(options: ShowCURDModalOptions) {
  grpShowOptions.value = options;
}
let curSelectedRow = ref<ProjectItem[]>([]);
const rowSelection = {
  type: "radio",
  selectedRowKeys,
  onChange: (keys: string[], selectedRows: ProjectItem[]) => {
    selectedRowKeys.value = keys;
    curSelectedRow.value = selectedRows;
  },
  getCheckboxProps: (record: ProjectItem) => ({
    // disabled: record.name === "Disabled User", // Column configuration not to be checked
    // name: record.name,
  }),
};
function customRow(record: ProjectItem) {
  return {
    onClick(e) {
      selectedRowKeys.value = [record.projectId as string];
      curSelectedRow.value = [record];
    },
  };
}
async function onSearch(model) {
  await reloadTable({ model });
}
const grpShowOptions = shallowRef<ShowCURDModalOptions>();
const selectData = ref<SelectItem[]>([
  {
    label: t("aiot.projectManage.industry"),
    value: "",
    key: "industryId",
    props: {
      allowClear: true,
    },
    options: [],
  },
]);
watch(
  () => props.show,
  async (v) => {
    visible.value = v;
    if (v) {
      const data = await getAllIndustrys();
      selectData.value[0].options = data
        ? data.map((el) => ({
            label: el.industryName,
            value: el.industryId,
          }))
        : [];
      reloadTable({ model, current: 1, sort: "displayOrder", order: OrderRule.ASC });
    }
  }
);
watch(visible, (v) => {
  emits("update:show", v);
});
function handleOk() {
  if (curSelectedRow.value?.length > 0) {
    emits("update:show", false);
    emits("ok", curSelectedRow.value);
  }
}
</script>
